<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="searchParm" :inline="true" size="default">
            <el-form-item>
                <el-input v-model="searchParm.nickName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <el-button icon="Close" type="danger" plain @click="resetBtn">重置</el-button>
                <el-button type="primary" icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column prop="nickName" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template #default="scope">
                    <el-tag v-if="scope.row.sex == '1'" type="danger" effect="dark">女</el-tag>
                    <el-tag v-if="scope.row.sex == '0'" effect="dark">男</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="username" label="账户"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == '1'" type="danger" effect="dark">停用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" effect="dark">启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="320" align="center">
                <template #default="scope">
                    <el-button type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
                   <!--  <el-button type="success" icon="Setting" size="default" @click="assignBtn(scope.row)">分配菜单</el-button> -->
                    <el-button type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchParm.currentPage"
            :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchParm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total" background>
        </el-pagination>
        <!-- 新增、编辑弹框 -->
        <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
            @on-close="onClose" @on-confirm="commit">
            <template v-slot:content>
                <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="default">
                    <el-form-item prop="nickName" label="姓名:">
                        <el-input v-model="addModel.nickName"></el-input>
                    </el-form-item>
                    <el-form-item prop="sex" label="性别:">
                        <el-radio-group v-model="addModel.sex">
                            <el-radio :label="'0'">男</el-radio>
                            <el-radio :label="'1'">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="phone" label="电话:">
                        <el-input v-model="addModel.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="username" label="账号:">
                        <el-input v-model="addModel.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码:">
                        <el-input v-model="addModel.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="status" label="状态:">
                        <el-radio-group v-model="addModel.status">
                            <el-radio :label="'0'">启用</el-radio>
                            <el-radio :label="'1'">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
        </SysDialog>
        <!-- 分配菜单 -->
        <AssignTree ref="assignTree"></AssignTree>
    </el-main>
</template>
<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue";
import SysDialog from "@/components/SysDialog.vue";
import AssignTree from "./AssignTree.vue";
import useDialog from "@/hooks/useDialog";
import {ElMessage, type FormInstance} from "element-plus";
import {addAdminUserApi, deleteApi, editApi, getListApi,} from "@/api/user/index";
import {User} from "@/api/user/UserModel";
import {Title} from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance";
//分配菜单ref属性
const assignTree = ref()
//获取全局属性
const { global } = useInstance();
//表单ref属性
const addRef = ref<FormInstance>();
//获取弹框属性
const { dialog, onClose } = useDialog();
//搜索绑定的对象
const searchParm = reactive({
    nickName: "",
    pageSize: 10,
    currentPage: 1,
    total: 0,
});
//表格高度
const tableHeight = ref(0);
//表格数据
const tableList = ref([]);
const tags = ref("");
//新增按钮
const addBtn = () => {
    tags.value = "0";
    //设置弹框标题
    dialog.title = Title.EDIT;
    dialog.height = 300;
    dialog.visible = true;
    //清空表单
    addRef.value?.resetFields();
};
//分配菜单
//新增表单绑定的对象
const addModel = reactive({
    userId: "",
    username: "",
    password: "",
    nickName: "",
    phone: "",
    sex: "",
    status: "",
});
//表单验证规则
const rules = {
    nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
    username: [{ required: true, message: "请输入账户", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    status: [{ required: true, message: "请选择状态", trigger: "blur" }],
};
//列表查询
const getList = async () => {
    let res = await getListApi(searchParm);
    if (res && res.code == 200) {
        console.log(res);
        tableList.value = res.data.records;
        searchParm.total = res.data.total;
    }
};
//编辑
const editBtn = (row: User) => {
    tags.value = "1";
    console.log(row);
    //设置弹框标题
    dialog.title = Title.EDIT;
    dialog.height = 300;
    dialog.visible = true;
    //设置数据回显
    nextTick(() => {
        Object.assign(addModel, row);
    });
};
//新增、编辑提交
const commit = () => {
    console.log(tags.value);
    //表单验证
    addRef.value?.validate(async (valid) => {
        if (valid) {
            console.log(addModel);
            //提交数据
            let res = null;
            if (tags.value == "0") {
                res = await addAdminUserApi(addModel);
            } else {
                res = await editApi(addModel);
            }
            if (res && res.code == 200) {
                //信息提示
                ElMessage.success(res.msg);
                //刷新表格
                getList();
                //关闭弹框
                dialog.visible = false;
            }
        }
    });
};
//删除
const deleteBtn = async (row: User) => {
    console.log(row);
    //信息提示
    console.log(global);
    const confirm = await global.$myconfirm("确定删除该数据吗?");
    if (confirm) {
        let res = await deleteApi(row.userId);
        if (res && res.code == 200) {
            ElMessage.success(res.msg);
            getList();
        }
    }
};
//搜索
const searchBtn = () => {
    getList();
};
//重置
const resetBtn = () => {
    searchParm.nickName = "";
    getList();
};
//页容量改变时触发
const sizeChange = (size: number) => {
    console.log(size);
};
//页数改变时触发
const currentChange = (page: number) => {
    console.log(page);
};
onMounted(() => {
    nextTick(() => {
        //计算表格高度
        tableHeight.value = window.innerHeight - 200;
    });
    getList();
});
</script>
<style scoped></style>